<template>
    <div id="" class="fyong">
        <h4>费用详情</h4>
      <ul class="xq">
        <li>
          <div>车辆品牌</div>
          <div v-for="item in xiangqing">{{item.manufacturing_company}}</div>
        </li>
        <li>
          <div>车牌号</div>
          <div v-for="item in xiangqing">{{item.license_plate_number}}</div>
        </li>
        <li>
          <div>车辆类型</div>
          <div v-for="item in xiangqing">{{item.model_of_car}}</div>
        </li>
        <li>
          <div>基本费用</div>
          <div v-for="item in xiangqing">{{item.basic_maintenance_cost}}</div>
        </li>
        <li>
          <div>养路费</div>
          <div v-for="item in xiangqing">{{item.road_toll}}</div>
        </li>
        <li>
          <div>总费用</div>
          <div v-for="item in xiangqing">{{item.cumulative_total_cost}}</div>
        </li>
      </ul>

    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "cost_details",
      data(){
          return{
            xiangqing:[]
          }
      },
      created(){
        this.getchusi();
      },
      methods:{
        //请求初始信息
        getchusi:function () {
          var url = "../../../static/home.json";
          this.$http.get(url).then(function (response) {
            if (response.body.status != 0) {
              Toast({  //mint-ui 提示
                message: '数据异常',
                position: 'bottom',
                duration: 5000
              });
            }
            this.xiangqing = response.body.che;
          })
        }
      }
    }
</script>

<style scoped>
   .fyong{
     width: 100%;
     color: black;
   }
  .xq{
    padding: 10px 4px;
    width: 80%;
    margin: 10px auto;
    font-size:18px;
    display: flex;
    justify-content: space-between;
  }
  .xq>li{
    padding: 3px 2px;
    text-align: left;
    margin-bottom: 4px;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }
   .xq>li>div:not(:nth-child(1)){
     font-size: 16px;
   }

</style>
